<template>
  <div class="app-container" id="admin-index">
    <!-- Note that row-key is necessary to get a correct row order. -->
    <!--search-->
    <div class='search-bar'>
      <div class="block mb10 mt10">
        <el-button type="primary" class='search-item' style='margin-left: 20px' @click="addItem">新增用户</el-button>
        <!-- <el-button type="primary" class='search-item' @click="dialogFormVisible2 = true">批量新增</el-button> -->
      </div>
    </div>
    <!--表格-->
    <div class='table-wrap'>
      <el-row v-for="(n1, i1) in roleList" :key="i1" class='flex flex-y-center row'>
        <el-col :span="3">
          <div class="grid-content table-cell mr10">
            <span class='tit1'>
              工号
            </span>
            <el-input v-if="n1.isEdit"  @mousewheel.native.prevent maxlength="6" style="width: 120px" type="number" :class="n1.order_no ? 'is-success' : 'is-error'" v-model.trim="n1.order_no" placeholder="工号"></el-input>
            <span class="tit2" v-else>
              {{n1.order_no}}
            </span>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content table-cell">
            <span class='tit1'>
              密码:
            </span>
            <el-input v-if="n1.isEdit" style="width: 120px" type="text" maxlength="12" :class="n1.password ? 'is-success' : 'is-error'" v-model="n1.password" placeholder="密码"></el-input>
            <span class='tit2'  v-else>
              {{n1.password}}
            </span>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content table-cell">
            <span class='tit1'>
              姓名:
            </span>
            <el-input v-if="n1.isEdit" style="width: 120px" type="text" maxlength="4" :class="n1.username ? 'is-success' : 'is-error'" v-model="n1.username" placeholder="姓名"></el-input>
            <span v-else class='tit2'>
              {{n1.username}}
            </span>
          </div>
        </el-col>

        <el-col :span="3">
          <div class="grid-content table-cell">
            <span class='tit1'>
              手机:
            </span>
            <el-input v-if="n1.isEdit" style="width: 120px" type="text" maxlength="11" v-model="n1.mobile" placeholder="手机"></el-input>
            <span v-else class='tit2'>
              {{n1.mobile}}
            </span>
          </div>
        </el-col>

        <el-col :span="3">
          <div class="grid-content table-cell">
            <span class='tit1'>
              邮件:
            </span>
            <el-input v-if="n1.isEdit" style="width: 120px" type="text" v-model="n1.email" placeholder="邮件"></el-input>
            <span v-else class='tit2'>
              {{n1.email}}    
            </span>
          </div>
        </el-col>
        <!-- <el-col :span="3">
          <div class="grid-content table-cell">
            <span class='tit1'>
              部门:
            </span>
            <span class="">
            <el-select v-model="n1.deptId" clearable placeholder="请选择">
              <el-option
              v-for="item in deptNameList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
          </el-select>
          </span>
          </div>
        </el-col> -->
        <el-col :span="3">
          <div class="grid-content table-cell">
            <span class='tit1'>
              权限:
            </span>
            <span class="">
            <el-select v-model="n1.role" clearable placeholder="请选择">
              <el-option
              v-for="item in orderStatusFlagList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
          </el-select>
          </span>
          </div>
        </el-col>

        <el-col :span="4">
          <div class="grid-content table-cell">
            <span class='tit1'>
              性别:
            </span>
            <el-radio-group v-model="n1.sex" v-if="n1.isEdit">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
            <span v-else class='tit2'>
              {{n1.sex}}    
            </span>
          </div>
        </el-col>

        <el-col :span="4">
          <div class="grid-content table-cell">
            <!-- <el-button v-if="n1.isEdit" @click="saveItem(n1, i1)">保存</el-button> -->
            <!-- <el-button @click="editItem(n1, i1)">编辑</el-button> -->
            <el-button @click="deleteItem(n1, i1)">删除</el-button>
          </div>
        </el-col>
      </el-row>

      <div class='footer'>
        <el-button type="primary" style="margin-left: 20px" @click="save()">保存提交</el-button> 
      </div>
    </div>
  </div>
</template>

<script>
import {AddUserName,Code} from '@/axios/api'
export default {
  name: '',
  data(){
    return {
      deptNameList:[
        {label:'工单审核',value:'1'},
        {label:'工单处理',value:'2'},
        {label:'工单回访',value:'3'},
        {label:'工单归档',value:'4'},
      ],
      orderStatusFlagList:[
        {label:'话务员',value:'4'},
        {label:'审核员',value:'5'},
        {label:'处理员',value:'6'},
        {label:'回访员',value:'7'},
      ],
      orderStatusFlag:'',
      value1: '',
      value2: '',
      number: 0,
      tel: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 10
      },
      title: '生成工单',
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      formRule1: {
        name:   [{required: true, trigger: 'blur'}],
        number: [{ required: true, trigger: 'blur' }],
        password: [{ required: true, trigger: 'blur' }],
        email: [{ required: true, trigger: 'blur' }]
      },
      formRule2: {
        content: [{ required: true, trigger: 'blur' }]
      },
      form1: {
        number: '',
        password: '',
        email: '',
        sex: '男'
      },
      form2: {
        content: ''
      },
      roleList: [{
        username: '',
        order_no: '',
        password: '',
        mobile: '',
        email: '',
        sex: '男',
        role:'',
        isEdit: true
      }]
    }
  },
  props:[],
  created(){

  },
  mounted(){

  },
  methods:{
    save(form) {
      let isValid                    = true
      let roleList                   = JSON.parse(JSON.stringify(this.roleList))
      let roleListArr                = []
      roleList.forEach((n1, i1) => {
        roleListArr.push(n1.order_no)
        for (let key in n1) {
          if (key != 'mobile' && key != 'email') {
            if (n1[key] == '0') return
            if (!n1[key]) {
              isValid                = false
            }
          }
        }
      })

      if (new Set(roleListArr).size !== roleListArr.length) {
        this.$message.error("列表存在相同工号")
        return
      }

      if (!isValid) {
        // 没有填完整
        this.$message.error("请填写完整")
        return
      } else {
        roleList.forEach((n1, i1) => {
          n1.sex = n1.sex == '男' ? '1' : '2';
          n1.deptId = n1.role
        })
        AddUserName({
          data:JSON.stringify(roleList)
        }).then(res=>{
          console.log(res)
          if(res.state==Code) {
            this.$message.success("添加成功");
            this.roleList = [{
              username: '',
              order_no: '',
              password: '',
              mobile: '',
              email: '',
              sex: '男',
              role:'',
              isEdit: true
            }]
          }
        })
      }
    },
    deleteItem(n, i) {
      if (this.roleList.length == 1) return
      this.roleList.splice(i, 1)
    },
    saveItem(n, i) {
      let isValid  = true
      for (let key in n) {
        if (key != 'phone' && key != 'email') {
          if (n[key] == '0') return
          if (!n[key]) {
            isValid  = false
          }
        }
      }

      if (!isValid) {
        Message({
          message: '除了手机其他都是必填字段',
          type: 'error',
          duration: 2 * 1000
        })
      } else {
        // 提交
        n.isEdit  = false
      }
    },
    editItem(n, i) {
      this.roleList[i].isEdit = true
    },
    addItem() {
      this.roleList.push({
        order_no: '',
        password: '',
        username: '',
        mobile: '',
        email: '',
        sex: '男',
        role:'',
        isEdit: true
      })
    },
  },
  components:{

  },
  computed:{

  },
  watch:{

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
#admin-index {
  
  .table-cell {
    padding: 10px 20px
  }

  .row {
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 10px;
  }

  .tit1 {
    font-size: 18px;
    color: #222;
  }

  .tit2,
  .time {
    font-size: 16px;
    color: #888
  }

  .time {
    margin-top: 5px
  }

  .time-select {
    width: 150px
  }

  .footer {
    padding: 15px 0
  }
}
</style>
